<template>
  <div class="cavas_box">
    <canvas id="canvasDom" ref="canvasDom" width="662" height="710"></canvas>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, Ref, ref } from 'vue'
import { drawCircle, drawRect, textLineFeed, textReturnOption } from './shapes'
const canvasDom: Ref<HTMLCanvasElement | null> = ref(null)
const ctx: Ref<CanvasRenderingContext2D | null> = ref(null)

onMounted(() => {
  nextTick(() => {
    drawCanvas()
  })
})
async function drawCanvas() {
  ctx.value = canvasDom.value!.getContext('2d')
  if (!ctx.value) return
  ctx.value.strokeStyle = '#ccc'
  let endAngle = 2 * Math.PI
  drawCircle(ctx.value, {
    x: 100,
    y: 100,
    r: 50,
    sAngle: 0,
    endAngle,
    counterclockwise: true,
  })
  console.log(
    {
      x: 100,
      y: 100,
      r: 50,
      sAngle: 0,
      endAngle: 2 * Math.PI,
      counterclockwise: true,
    },
    'x, y, r, sAngle, eAngle'
  )

  ctx.value.fill()
}

// 获取图片完成加载后的实例对象
function getImage(imgSrc: string) {
  return new Promise((resolve, reject) => {
    let img = new Image()
    img.src = imgSrc
    img.crossOrigin = 'anonymous'
    img.onload = function () {
      resolve(img as HTMLImageElement)
    }
  })
}
</script>

<style lang="scss" scoped>
.cavas_box {
  padding-top: 50px;
  display: flex;
  justify-content: center;
}
#canvasDom {
  width: 331px;
  height: 350px;
}
</style>
